<template>
  <template v-if="questionList.length">
    <div class="mb-[20px] flex justify-center items-center w-full">
      <div class="flex-1">
        <h3 class="text-[24px] text-[600]">回收站</h3>
      </div>
      <div class="flex-1 justify-end flex">
        <a-input-search
            size="large"
            v-model:value="value"
            placeholder="输入关键字"
            style="width: 260px"
            @search="onSearch"
        />
      </div>
    </div>
    <div class="mb-[15px]">
      <a-space>
        <a-button type="primary" :disabled="!hasSelected" @click="restore">恢复</a-button>
        <a-button danger :disabled="!hasSelected" @click="deleteCompletely">彻底恢复</a-button>
      </a-space>
    </div>
    <div class="w-full">
      <a-table
          :rowKey="(record) =>record._id"
          @change="handleTableChange"
          :pagination="pagination"
          :row-selection="rowSelection"
          :columns="columns"
          :data-source="questionList"
      >
        <template #headerCell="{ column }">
            <span>
              {{ column.title }}
            </span>
        </template>
        <template #bodyCell="{ column, text ,index}">
          <template v-if="column.dataIndex==='isPublished'">
            <a-tag v-if="!text">未发布</a-tag>
            <a-tag color="processing" v-else>已发布</a-tag>
          </template>
        </template>
      </a-table>
    </div>
  </template>
  <template v-else>
    <div class="w-full h-full flex items-center justify-center ">
      <a-spin/>
    </div>
  </template>
</template>

<script setup>
import {deleteQuestionItem, getStarQuestionList} from "../../http/api.js";
import {onMounted, ref, computed} from "vue";
import {message} from "ant-design-vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { createVNode } from 'vue';
import { Modal } from 'ant-design-vue';
let value = ref('')
let total = ref(0)
let questionList = ref([])
let RowKeys = ref([]);
const onSearch = () => {

}
const deleteCompletely = () => {
  if (!RowKeys.value.length) return;
  Modal.confirm({
    title: '确认彻底删除该问卷？',
    icon: createVNode(ExclamationCircleOutlined),
    content: createVNode('div', {  }, '删除以后不可以找回'),
    onOk() {
      deleteItem('删除成功')
    },
    onCancel() {
      console.log('Cancel');
    },
    class: 'test',
  });
}
const deleteItem = (msg) => {
  RowKeys.value.forEach((i) => {
    deleteQuestion(i)
  })
  questionList.value = questionList.value.filter(item => !RowKeys.value.includes(item._id));
  message.success(msg)
  RowKeys.value = []
  getData()
}
const restore = () => {
  if (!RowKeys.value.length) return;
  deleteItem('恢复成功')
}
const hasSelected = computed(() => RowKeys.value.length > 0);
const rowSelection = {
  selectedRowKeys: RowKeys,
  onChange: (selectedRowKeys, selectedRows) => {
    RowKeys.value = selectedRowKeys;
  },
  type: "checkbox",
};
const deleteQuestion = async (id) => {
  await deleteQuestionItem(id)
}
const pagination = ref({
  current: 1,
  defaultPageSize: 10,
  total: total,
  position: ['bottomCenter'],
  showTotal: () => `共 ${total.value} 条`
})
const columns = [
  {
    title: '标题',
    dataIndex: 'title',
  },
  {
    title: '是否发布',
    dataIndex: 'isPublished',
  },
  {
    title: '答卷',
    dataIndex: 'answerCount',
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
  },
];
const getData = async (current, pageSize) => {
  let result = await getStarQuestionList({isDeleted: true}, current, pageSize)
  questionList.value = result.list
  total.value = result.total
}
const handleTableChange = (page) => {
  pagination.value.current = page.current
  pagination.value.pageSize = page.pageSize
  getData(page.current, page.pageSize)
}

onMounted(() => {
  getData()
})
</script>

<style scoped>

</style>
